<template>
	<section>
		<full-screen-dialog :title="'对账明细表'" v-model="visible" :width="1200" destroy-on-close
			:close-on-click-modal="false">
			<el-main class="nopadding">
				<el-header>
					<div class="right-panel">
						<el-button :icon="Search" type="primary" @click="submit">查询</el-button>
						<el-button :icon="Search" type="info" plain @click="resetSearch">重置</el-button>
						<el-button text type="primary" @click="showCondition = !showCondition">
							<span v-if="!showCondition">展开</span>
							<span v-else>收起</span>
							<vab-icon class="vab-dropdown" :class="{ 'vab-dropdown-active': fold }" icon="arrow-up-s-line" />
						</el-button>
					</div>
				</el-header>
				<el-foot v-show="showCondition">
				    <vab-query-form-top-panel>
				        <el-form inline label-width="49px" :model="queryForm" style="margin-top: 5px">
				            <el-form-item label="采购单日期" label-width="100px">
				                <el-date-picker
				                    style="width: 300px"
				                    v-model="queryList.StorageOrderTimes"
				                    type="datetimerange"
				                    value-format="YYYY-MM-DD HH:mm:ss"
				                    format="YYYY-MM-DD HH:mm:ss"
				                    range-separator="-"
				                    unlink-panels="true"
				                    start-placeholder="开始时间"
				                    end-placeholder="结束时间"
									:default-time="defaultTime"
				                />
				            </el-form-item>
							<el-form-item label="采购入库单" label-width="100px">
							    <el-input
							        placeholder="---请输入采购入库单编号---"
							        v-model="queryList.StorageOrderCode"
							        style="width: 300px"
							    />
							</el-form-item>
							<el-form-item label="物料编号" label-width="100px">
							    <el-input
							        placeholder="---请输入物料编号---"
							        v-model="queryList.MaterialCode"
							        style="width: 300px"
							    />
							</el-form-item>
							<el-form-item label="物料名称" label-width="100px">
							    <el-input
							        placeholder="---请输入物料名称---"
							        v-model="queryList.MaterialName"
							        style="width: 300px"
							    />
							</el-form-item>
				           <el-form-item label="制单人" label-width="100px">
				               <el-input
				                   placeholder="---请输入制单人---"
				                   v-model="queryList.DocumentsUser"
				                   style="width: 300px"
				               />
				           </el-form-item>
				        </el-form>
				    </vab-query-form-top-panel>
				</el-foot>
				<scTable ref="mytable" :span-method="objectSpanMethod" border :queryType="'storage-order/list'"
					:data="listData" :queryList="queryList" :column="columnList" :orderList="OrderList"
					:sort-orders="['ascending', 'descending']" @selection-change="selectionChange"
					:hidePagination="true" row-key="ReceivingOrderId" key="ReceivingOrderId" stripe show-summary
					>
					<el-table-column type="selection" width="50"></el-table-column>
					<el-table-column label="序号" type="index" width="80"></el-table-column>
					<template #applyDate="{row}">{{row.applyDate?.slice(0,10)}}</template>
					<!-- <el-table-column label="对账状态" prop="statusDesc" width="100"></el-table-column>
					<el-table-column label="业务日期" prop="applyDate" width="200"></el-table-column>
					<el-table-column label="单据编号" prop="storageOrderCode" width="200"></el-table-column>
					<el-table-column label="类型" prop="storageOrderTypeDesc" width="100"></el-table-column>
					<el-table-column label="供应商" prop="supplierFullName" width="250"></el-table-column>
					<el-table-column label="门店" prop="storeName" width="140"></el-table-column>
					<el-table-column label="关联采购订单" prop="purchaseOrderCode" width="200"></el-table-column>
					<el-table-column label="物料编码" prop="materialCode" width="100"></el-table-column>
					<el-table-column label="物料名称" prop="materialName" width="250"></el-table-column>
					<el-table-column label="规格型号" prop="materialSpecs" width="100"></el-table-column>
					<el-table-column label="数量" prop="qty" width="100"></el-table-column>
					<el-table-column label="单位" prop="unitName" width="100"></el-table-column>
					<el-table-column label="结算价" width="100">
						<template #default="scope">
							<div>{{scope.row.price }}</div>
						</template>
					</el-table-column>
					<el-table-column label="金额" prop="totalAmount" width="100">
					</el-table-column>
					<el-table-column label="制单人" prop="documentsUser" width="100"></el-table-column> -->

				</scTable>
			</el-main>

			<template #footer>
				<div style="text-align: center;">
					<el-button @click="visible = false">关 闭</el-button>
				</div>
			</template>
		</full-screen-dialog>
		<!-- <el-dialog title="对账明细表" v-model="visible" :width="1400" destroy-on-close @closed="$emit('closed')">



		</el-dialog> -->
	</section>

</template>

<script>
	import tool from "@/utils/tool";
	export default {
		emits: ["checkTable"],
		data() {
			return {
				visible: false,
				orgType: '',
				columnList: [
					{
						prop: "statusDesc",
						label: "对账状态",
						width: "100",
					},
					{
						prop: "applyDate",
						label: "业务日期",
						width: "120",
					},
					{
						prop: "storageOrderCode",
						label: "单据编号",
						width: "200",
					},
					{
						prop: "storageOrderTypeDesc",
						label: "类型",
						width: "100",
					},
					{
						prop: "supplierFullName",
						label: "供应商",
						width: "240",
					},
					{
						prop: "storeName",
						label: "门店",
						width: "140",
					},
					{
						prop: "purchaseOrderCode",
						label: "关联采购订单",
						width: "180",
					},
					{
						prop: "materialCode",
						label: "物料编码",
						width: "100",
					},
					{
						prop: "materialName",
						label: "物料名称",
						width: "220",
					},
					{
						prop: "materialSpecs",
						label: "规格型号",
						width: "100",
					},
					{
						prop: "qty",
						label: "数量",
						width: "100",
					},
					{
						prop: "unitName",
						label: "单位",
						width: "95",
					},
					{
						prop: "price",
						label: "结算价",
						width: "100",
					},
					{
						prop: "totalAmount",
						label: "金额",
						width: "100",
					},
					{
						prop: "documentsUser",
						label: "制单人",
						width: "100",
					},
				],
				queryList: {
					Status: 0,
					SupplierId: tool.data.get("USER_INFO").OrgId
				},
				materialTypeTree: [],
				selectionRows: [],
				listData: [],
				showCondition: false,
				columnIndex0: '',
				columnIndex17: '',
				columnIndex15: '',
				dialogPrint: false,
				dialogCheck: false,
				dialogReconciliatio: false,
				olddata:{},
				defaultTime:[
					new Date(2000, 1, 1, 0, 0, 0),
					new Date(2000, 2, 1, 23, 59, 59),
				]
			}
		},
		methods: {
			submit() {
				
				this.initData(this.olddata);
				//console.log('submit...', this.selectionRows)
				// 将选中的数据的 storageOrderCode 转换为一个集合（用于快速查找）
				//const smallSet = new Set(this.selectionRows.map(item => item.storageOrderCode));

				// 使用 filter 方法遍历表格数据，筛选符合条件的对象
				//const resultArray = this.listData.filter(item => smallSet.has(item.storageOrderCode));

				//this.$emit("checkTable", resultArray);
				//this.visible = false;

			},
			resetSearch(){
				this.queryList={
					Status: 0,
					SupplierId: tool.data.get("USER_INFO").OrgId
				}
			},
			async initData(data) {
				
				console.log(data);
				this.olddata=data;
				let arr = []
				arr.push(data.storageOrderAccountId)
				try {
					var obj= Object.assign({storageOrderAccountIds: arr},this.queryList)
					var returnValue = await this.$API.auth.PostProcessApi.post(
						"storage-order-account/items", obj
					);
					if (returnValue.status == 200) {
						this.visible = true
						console.log(returnValue.response);
						this.listData = returnValue.response
					} else {
						this.$message.error("操作失败:" + returnValue.msg);
					}
				} catch (error) {
					this.loading = false;
					return false;
				}
				// this.supName = tool.data.get("USER_INFO").Name

				// this.visible = true
				// this.orgType = tool.data.get("USER_INFO").AccountType;
				// this.$nextTick(() => {
				// 	this.initOptions();
				//    this.opBindData();
				// })

			},
			async opBindData() {
				this.listData = []
				this.$refs.mytable.clearSort();
				// this.$refs.mytable.getData();
			},



		},
	}
</script>

<style>
</style>
